<template>
  <div class="users">
<!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" >
      <!-- <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>日志管理</el-breadcrumb-item>
    </el-breadcrumb> 
<!-- 卡片式图 -->
<el-row >
<div class="box-row" >
  <div class="box-left">
    
  <el-link icon="el-icon-plus">导出</el-link>
  <el-link icon="el-icon-printer">打印</el-link>
  <el-link icon="el-icon-printer">打印设置</el-link>
    
  </div>
  <div class="box-right">
     用户名：
     <input type="text"> 
   
    <el-link icon="el-icon-search" >查询</el-link>
  </div>
</div> 
<!-- 表格区 -->
 <el-table
    border
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{'text-align':'center'}"
    >
    
    <el-table-column
      prop="name"
      label="用户名"
      width="500"
      align='center'
      >
      
    </el-table-column>
    <el-table-column
      prop="uploadDate"
      label="登录时间"
      width="500"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="loadIP"
      label="登录IP"
       width="620"
       align='center'
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="登录地点"
      width="660"
      align='center'
      >
    </el-table-column>
    
    
    
    
  </el-table>
 </el-row> 
    <el-pagination
      :page-sizes="[3, 5, 7, 9]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="10">
    </el-pagination>
     </div>
</template>

<script>
export default {
 data() {
      return {
        tableData: [{
          name: 'admin',
          district: "贵池区",
          loadIP: "192.168.1.112",
          number: 5,
          waterSupply: 4500,
          uploadDate: "2020-08-10 00:00:00",
          address:"秋江水厂" 
     } ],
        
      }
 },
 methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
}
</script>

<style lang="less" scoped>
.users{
  
   .el-breadcrumb{
     background-color: #E9EDF0 !important;
    height: 50px;
line-height: 50px;
font-size: 14px;
padding-left: 5px;
   }
 .el-row{
     background:rgb(91,146,211);
   

.box-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:rgb(91,146,211);
  color: #fff;
  box-sizing: border-box;

  .box-left{
    padding: 5px;
    .el-link{
padding: 15px;
color: #fff;
    }

  }
  .box-right{
padding-right: 10px;
// overflow：hidden
 input{
  
  height:25px;
}
.el-link{
  padding-left: 10px;
   color: #fff;
}

  }
}
   }
   
.el-pagination{
       background: rgb(241, 241, 241);
       margin: 5px;
     }
  
}
</style>